<template>
  <div class="chart-page">
    <div v-for="(group, index) in chartData" :key="index">
      <div>
        <el-text tag="h2" size="large" style="margin: 20px 0;">{{ index }}</el-text>
        <el-row :gutter="10">
          <el-col style="margin: 10px 0" :lg="8" :md="8" :xs="8" v-for="(item, index) in group" :key="item.quotaCode + index">
            <count-views :data="item" />
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";

import { useCool } from "/@/cool";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { LineChart } from "echarts/charts";
import { GridComponent, LegendComponent, TitleComponent, TooltipComponent } from 'echarts/components';

import CountPaid from "./components/count-paid.vue";
import CountViews from "./components/count-views.vue";

const { refs, setRefs, router, service } = useCool();
use([
  CanvasRenderer,
  GridComponent,
  LineChart,
  LegendComponent,
  TitleComponent, 
  TooltipComponent
]);


const quotaDataList = reactive<any>([]);
const chartData = reactive<any>({});


async function queryQuota() {
  try {
    const dataList = await service.app.quota.todayCompareQuota();

    // const chartData = {};
    dataList?.forEach(item => {
      if (!chartData[item.groupName]) {
        chartData[item.groupName] = [];
      }
      chartData[item.groupName].push(item);
    })
    quotaDataList.push(...(dataList || []));
  } catch (error) {
    console.log(error);
  }
}
console.log(quotaDataList, 'quotaDataList')
onMounted(() => {
  queryQuota();
})

</script>

<style lang="scss">
.chart-page {
  max-width: 1140px;
  margin: 20px auto;
  padding-bottom: 40px;

  .card {
    .echarts {
      height: 50px;
      width: 100%;
    }

    &__container {
      padding: 0;
    }
  }

  .el-card__footer,
  .el-card__header,
  .el-card {
    border: 0;
  }

  .el-card__body {
    padding: 10px;
  }


  .chart-table-header {
    background-color: #083A6F !important;
    color: #fff;
  }
}
</style>
